<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/layui/layui/css/layui.css">
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    #container{
    /*保证footer是相对于container位置绝对定位*/
    position:relative;
    width:100%;
    min-height:100%;
    /*设置padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；*/
    padding-bottom: 45px;
    box-sizing: border-box;
    }
    #foot{
    width: 100%;
    height:45px;   /* footer的高度一定要是固定值*/
    position:absolute;
    bottom:0px;
    left:0px;
    background: #ddd;
    text-align:center;
    line-height:45px;
    }

</style>
</head>
<body>
<div class="layui-layout layui-layout-admin" id="container">
<!--头部-->
<div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <ul class="layui-nav layui-layout-left" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="/control.html" target="mainiframe">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item ">
            <a href="">控制台<span class="layui-badge">9</span></a>
        </li>
        <li class="layui-nav-item">
            <a href="">个人中心<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item">
            <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">退出</a></dd>
            </dl>
        </li>
    </ul>
</div>

<!--iframe-->
<div class="layui-body" >
    <!-- 内容主体区域 -->
    <iframe src="https://www.baidu.com/" frameborder="0" height="100%" width="100%"
            id="mainiframe" name="mainiframe" scrolling="no" onload="resizeFrameHeight()">
    </iframe>
</div>

<!--底部-->
<div class="" id="foot">
    <!-- 底部固定区域 -->
    <span>© layui.com - 底部固定区域</span>
</div>
</div>
<script src="/layui/layui/jquery.min.js"></script>
<script src="/layui/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });

     function resizeFrameHeight(){
        var ifm = document.getElementById("mainiframe");
        ifm.height = document.documentElement.clientHeight - 50;
    }
    window.οnresize=function(){
        resizeFrameHeight();
    }

</script>
</body>
</html>